<template>
    <!-- 添加或修改菜单对话框 -->
    <el-dialog ref="elForm" :title="title" width="700px" append-to-body  @close="close" v-bind="$attrs" v-on="$listeners">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="key值" prop="value">
                <el-input v-model="form.value"></el-input>
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="close">取 消</el-button>
        </div>
    </el-dialog>
</template>
<script>
    import buttons from "@/api/systemManagement/buttons/index";
    export default {
        name:"eidtDialog",
        inheritAttrs: false,
        props: {
            row: {
                type: Object,
                default: function() {
                    return {};
                }
            },
        },
        data() {
            return {
                form:{
                    id: undefined,
                    name: undefined,
                    value:undefined,
                    remark: undefined,
                },
                // 表单校验
                rules: {
                    name: [
                        { required: true, message: "名称不能为空", trigger: "blur" }
                    ],
                    value: [
                        { required: true, message: "key值不能为空", trigger: "blur" }
                    ],
                }
            }
        },
        computed: {
            title() {
                return this.row.id ? "修改" : "添加";
            }
        },
        created() {
            this.initFormData();
        },
        mounted() {},
        methods: {
            initFormData() {
                if (this.row.id) {
                    for (let o in this.form) {
                        this.form[o] = this.row[o];
                    }
                }
            },
            // 选择图标
            selected(name) {
                this.form.icon = name;
            },
            onOpen() {},
            onClose() {
                this.$refs['elForm'].resetFields()
            },
            close() {
                this.$emit('update:visible', false)
            },
            handelConfirm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    this.close()
                })
            },
            /** 提交按钮 */
            submitForm: function() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != undefined) {
                            buttons.editButtons(this.form.id,this.form).then(response => {
                                this.msgSuccess("修改成功");
                                this.$emit("reloadList")
                                this.close()
                            });
                        } else {
                            buttons.addButtons(this.form).then(response => {
                                this.msgSuccess("新增成功");
                                this.$emit("reloadList")
                                this.close()
                            });
                        }
                    }
                });
            },
        }
    }

</script>
<style>
</style>
